<template>
    <transition name="move">
        <div class="add-content" v-show="visible">
            <i class="el-icon-close icon" @click="close"></i>
            <Crumb name="Address"></Crumb>
            <div class="search">
                <el-button type="primary" size="small" class="input" @click="clear()
                                                                        dialogVisible=true">Add Address</el-button>
            </div>
            <div class="content">
                <div class="table-wrapper">
                    <el-table
                            :data="addressList"
                            border
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="addressAbbr"
                                label="Address Abbr"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="Address"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="phone"
                                label="Phone"
                        >
                        </el-table-column>

                        <el-table-column
                                label="Operate">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-edit" type="primary" @click="edit(scope.row)" size="small">
                                    Edit
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
            <el-dialog
                    modal-append-to-body
                    append-to-body
                    title="Address"
                    :visible.sync="dialogVisible"
                    width="80%"
            >
                <el-form ref="form" :model="address" rules="rule" label-width="150px">
                    <el-form-item label="Address Abbr" prop="addressAbbr">
                        <el-input v-model="address.addressAbbr" placeholder="Address Abbr" class="my-input"
                                  size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="Address" prop="address">
                        <el-input v-model="address.address" placeholder="Address" class="my-input"
                                  size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="Phone" prop="phone">
                        <el-input v-model="address.phone" placeholder="Phone" class="my-input" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="Longitude">
                        <el-input v-model="address.positionLongitude" placeholder="Longitude" size="small" class="my-input"></el-input>
                    </el-form-item>
                    <el-form-item label="Latitude">
                        <el-input v-model="address.positionLatitude" placeholder="Latitude" size="small" class="my-input"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="submitForm">Submit</el-button>
              </span>
            </el-dialog>
        </div>
    </transition>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {getAddressList, addAddress, modAddress} from "../../api/customer";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "address",
        props: {
            visible: Boolean,
            customerId: Number
        },
        data() {
            return {
                addressList: [],
                address: {
                    addressId: '',
                    address: '',
                    addressAbbr: '',
                    phone: '',
                    positionLongitude:'',
                    positionLatitude:''

                },
                rule: {
                    addAddress: [{required: true}],
                    addressAbbr: [{required: true}],
                    phone: [{required: true}],
                },
                dialogVisible: false
            }
        },
        methods: {
            async submitForm() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        const {addressId, address, addressAbbr, phone,positionLongitude,positionLatitude} = this.address;
                        if (!addressId) {
                            const {status} = await addAddress({
                                customerId: this.customerId,
                                address,
                                addressAbbr,
                                phone,
                                positionLongitude,
                                positionLatitude
                            });
                            if (status === ERROR_OK) {
                                this.getAddressList()
                                this.clear();
                                this.dialogVisible = false;
                            }
                        } else {
                            const {status} = await modAddress({
                                customerId: this.customerId,
                                address,
                                addressAbbr,
                                phone,
                                addressId,
                                positionLongitude,
                                positionLatitude
                            });
                            if (status === ERROR_OK) {
                                this.clear();
                                this.dialogVisible = false
                            }
                        }
                    }
                })
            },
            clear() {
                this.address = {
                    addressId: '',
                    address: '',
                    addressAbbr: '',
                    phone: '',
                    positionLongitude:'',
                    positionLatitude:''
                }
            },
            close() {
                this.$emit('close')
            },
            edit(address){
                this.address = address;
                this.dialogVisible =true
            },
            async getAddressList() {
                const {status, data} = await getAddressList(this.customerId);
                if (status === ERROR_OK) {
                    this.addressList = data;
                } else {
                    this.addressList = [];
                }
            }
        },
        watch: {
            customerId(id) {
                if (id) {
                    this.getAddressList(id);
                }
            }
        },
        components: {
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    .add-content {
        position: fixed;
        padding: 20px;
        overflow: scroll;
        z-index: 101;
        top: 0;
        right: 10px;
        bottom: 0;
        left: 10px;
        background: #fff;
        .search {
            text-align: left;
            margin: 20px 0;
        }
        .icon {
            position: absolute;
            font-size: 30px;
            right: 30px;
            top: 10px;
            font-weight: 800;
            color: #409eff;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            &:hover {
                transform: rotate(90deg);
            }
        }
        &.move-enter-active, &.move-leave-active {
            transition: all 0.5s ease;
        }
        &.move-enter, &.move-leave-to {
            transform: translateX(100%);
        }
    }

</style>